@charset "UTF-8";

.#{$ns-obj}button {
    display: inline-block;
    padding: $btn-pd-tb $btn-pd-lr;
    margin: 0;
    line-height: 1;
    box-sizing: border-box;

    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    font-size: $btn-ft-size;
    color: $white;
    border: 1px solid $gray;
    border-radius: $input-radius;

    outline: none;
    cursor: pointer;

    user-select: none;
    -webkit-appearance: none;

    &.is-loading {  /* 加载中 */
       transition: all .2s ease-in-out;  // 添加一点渐变，让按钮尺寸的变化不突兀

        &:after {
            content: attr(data-loading);
        }

        & > * {display: none;}
        & > .icon-loader {display: inline-block;}
    }

    &[disabled] {
        color: $gray !important;
        background-color: $dark-white !important;
        border-color: lighten($gray, 10%) !important;
	}

	> [class^="icon-"] {  // 防止图标偏移，撑大按钮
		vertical-align: -2px;
		line-height: 0;
	}
}

.#{$ns-obj}button-normal {
    color: $black;
    background: $color-thead;
    &:hover {
        color: $blue;
        border-color: $blue;
    }
}

// 情景按钮 mixin
@mixin colorButton($color) {
    &, &:active {
        background: $color;
        border-color: $color;
    }

    &:hover, &:focus {
        background: lighten($color, 10%);
        border-color: lighten($color, 10%);
    }
}

.#{$ns-obj}button-primary {
    @include colorButton($blue);
}

.#{$ns-obj}button-success {
    @include colorButton($color-success);
}

.#{$ns-obj}button-warning {
    @include colorButton($color-warning);
}

.#{$ns-obj}button-danger {
    @include colorButton($color-danger);
}

.button-lg {
    padding: $btn-pd-tb + 1px $btn-pd-lr + 4px;
    font-size: $btn-ft-size + 2px;
}

.button-sm {
    padding: $btn-pd-tb - 2px $btn-pd-lr - 6px;
    font-size: $btn-ft-size - 2px;
}

.button-xs {
    padding: $btn-pd-tb - 6px;
    font-size: $btn-ft-size - 4px;
}
